<script setup>
import {ref,reactive} from 'vue'
import {getCoserData} from '../../api/coser'
const coserData = ref([])
getCoserData()
.then((res)=>{
    coserData.value = res.data.data
})
</script>
<template>
    <div>分类</div>
    <div class="coser" v-for="item in coserData">
        <div class="firstcoser">
            <img class="firstcoserimg"
                :src="item.firstimg"
                alt="">
            <img class="firstface"
                :src="item.face"
                alt="">
            <h2 class="firstname">{{item.name}}</h2>
        </div>
        <div class="othercosers">
            <div class="cosers" v-for="items in item.otherimg">
                <img class="cosersimg"
                    :src="items"
                    alt="">
            </div>
        </div>
    </div>
</template>
<style scoped>
.coser {
    width: 80%;
    margin: 30px auto;
    height: 440px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.firstcoserimg {
    width: 100%;
    height: 100%;
}

.firstcoser {
    height: 420px;
    width: 300px;
    position: relative;
}

.firstface {
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 30px;
    left: 20px;
    border-radius: 25px;
    border: 3px solid #fff;
}

.firstname {
    position: absolute;
    bottom: 25px;
    left: 80px;
    color: #fff;
}

.othercosers {
    flex: 1;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.cosers {
    width: 150px;
    height: 200px;
    margin-top: 10px;
    transition: all 1s;
}
.cosers:hover{
    width: 200px;
    height: 250px;
}
.cosersimg {
    width: 100%;
    height: 100%;
}</style>